<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>公寓</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
    <link href="public/bootstrap/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="public/xw/css/xcConfirm.css" rel="stylesheet" type="text/css" />
    <script src="public/JQuery.1.11.3.js"></script>
    <script src="public/bootstrap/dist/js/bootstrap.js"></script>
    <script src="public/tool/jquery.placeholder.js"></script>
    <script src="public/tool/jquery.color.js"></script>
    <script src="public/xw/js/xcConfirm.js" type="text/javascript" charset="utf-8"></script>

    <!--[if lt IE 9]>
    <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<script type="text/javascript">
    $(function () {
        // Invoke the plugin
        $('input, textarea').placeholder();
    });
</script>

<style type="text/css">
    .sgBtn{width: 135px; height: 35px; line-height: 35px; margin-left: 10px; margin-top: 10px; text-align: center; background-color: #0095D9; color: #FFFFFF; float: left; border-radius: 5px;}
    .xcConfirm .popBox .ttBox{
        height:50px;
    }
</style>
<?php
include 'class/MMysql.php';

$mysql = new MMysql();
//$count1=$mysql->where(array("del_flag"=>0))->count('message');
?>
<body>

<!--引入导航条-->
<?php
include 'base/home_header.php';
?>
<style>
    .li_property a{
        text-decoration:underline;
    }
    .dingzhi{
        position: relative;
        height:121px;
        opacity: 0.75;
        background: #FFFFFF;;
        display: block;
        padding-top: 25px;
        top: 64px;
        float: left;
    }
    .dingzhi .span1{
        padding-left: 121px;
        font-size: 20px;
        color: #262626;
        line-height: 35px;
        display: inline-block;;
    }
    .dingzhi .span2{
        font-size: 14px;
    }
    .bg-color-black{
        background: #4CB7C2;
    }
    .dingzhi button{
        width: 140px;
        color: white;
        text-align: center;
    }
    .slide{
        background-size: 100% 100%;
        /*background-color: yellow;*/
        height: 136px;
        width: 81px;
        /*margin-top: 100px;*/
        float: left;;
    }
    .slide.left{
        background-image: url("public/image/img/leftslip.png");
    }
    .slide.right{
        background-image: url("public/image/img/rightslide.png");
    }
    .select{
        text-align: center;
        width: 50%;
        min-width: 590px;
        float: left;
        border-right: 1px solid whitesmoke;
        margin-top: 30px;
        font-size: 16px;
        color: #333743;
        letter-spacing: 0px;
    }
    .selectnot{
        border-right: 0px solid black;
    }
    .properties{
        position: relative;
        top:30px;
        /*background-color: red;*/
    }
    .margin_left{
        margin-left: 2%;
        margin-right: 2%;
    }
    .margin_left img{
        width: 100%;
        height: 90%;
    }
    input[type=button],button{
        display: inline-block;
        padding: 6px 12px;
        margin-bottom: 0;
        font-size: 14px;
        font-weight: normal;
        line-height: 1.42857143;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 4px;
        color: white;
    }
    .cityselect{
        list-style-type:none;
    }
    .cityselect li{
        margin-top: 12px;
        font-size: 20px;
        cursor: pointer;
    }
    .cityselect li:hover{
        /*background: green;*/
    }
    .selectcitychild{
        position: absolute;
        background:whitesmoke;
        height: 200px;width: 268px;top:85px;
        left: 15%;overflow :auto;display: none;
        z-index: 4;
    }

    .pricechild{
        position: absolute;
        background:whitesmoke;
        height: 85px;width: 50%;top:85px;
        left: 50%;
        display: none;
        z-index: 4;
    }
    .propertyinfo{
        width: 31%;
        height: 382px;
        float: left;
        margin-left: 1%;
        margin-right: 1%;
        margin-top: 20px;
    }
    .propertysinfo{
        margin: 0 auto;
        width: 1180px;
        height: 300px;
        margin-top: 30px;
        position: relative;
    }
    .propertyinfo > div:hover {
        z-index: 10;
    }
    .propertyinfo >div:hover{
        transform: scale(1.2, 1.2);
        -webkit-transform: scale(1.2, 1.2);    /* for Chrome || Safari */
        -moz-transform:scale(1.2, 1.2);     /* for Firefox */
        -ms-transform:scale(1.2, 1.2);      /* for IE */
        -o-transform:scale(1.2, 1.2);        /* for Opera */
        transition: .3s transform;
    }

</style>

<div style="width: 100%;min-width: 1180px; margin:0 auto; height: 600px;position: relative;">

    <div style="position: absolute;width: 100%;height: 100%;">
        <img src="public/image/img/Photo2.png" style="width: 100%;height:100%;">

    </div>

    <div style="position: fixed;top:64px;width: 100%;z-index: 10;">
        <div class="dingzhi" style="width: 60%;">
                    <span class="span1">
                        找不到喜欢的房?告诉我们你想要什么房
                    </span>

                    <span class="span1 span2">
                        最专业的澳洲房地产投资咨询机构,以业界最专业的服务为你的澳洲投资之路助力!
                    </span>
        </div>

        <div class="dingzhi" style="width: 30%;text-align: center;">

            <input id="tomessage" type="button" value="立即定制房产" class="bg-color-black" style="height: 56px;font-size: 20px;width: 183px;">

        </div>

        <div id="close" class="dingzhi" style="width: 10%;">
            <div style="width: 20px;height: 20px;">
                <img src="public/image/quit.png" style="width: 100%;height: 100%;">
            </div>
        </div>
    </div>

    <div style="position: absolute;top: 280px;width: 100%;min-width: 1180px;text-align: center;">
        <a href="property_agribusiness.php">
            <div class="slide" style="margin-left: 74px;">
                <img src="public/image/img/leftslip.png" style="width: 100%;height: 100%;">
            </div>
        </a>
             <span style="font-size: 120px;color: #FFFFFF;text-shadow: 0px 2px 4px #000000;">
               公寓
               </span>
        <a href="property_dreampropertis.php">
            <div class="slide" style="float: right;margin-right: 74px;">
                <img src="public/image/img/rightslide.png" style="width: 100%;height: 100%;">
            </div>
        </a>
    </div>

</div>

<div style="position:relative; border-bottom: 1px solid whitesmoke;height: 85px;margin: 0 auto;min-width: 1180px;color: #9b9b9b;">
    <div class="select">
        <span data-value="-1" class="selectcityparents" style=" cursor: pointer;" onmouseover="showcity()">
            选择城市
        </span>
    </div>
    <div class="selectcitychild" onmouseleave="hidecity()">
        <ul class="cityselect">
            <?php
            $mysql = new MMysql();
            $res = $mysql
                ->select('city');
            for($i=0;$i<count($res);$i++){
                echo ' <li>
                    <div style="float: left;">
                        <span data-value="'.$res[$i]['city_id'].'">'.$res[$i]['city_ch_name'].'</span>
                    </div>
    
                    <div style="clear: both;">
   
                    </div>
                </li>';
            }
            ?>
        </ul>

    </div>


    <div class="select selectnot">
        <span style=" cursor: pointer;" onmouseover="showprice()">
           价格范围
        </span>
    </div>
    <div  class="pricechild" onmouseleave="hideprice()">

        <div class="form-inline" style="margin-top: 25px;margin-left: 3%;min-width: 550px;" role="form">
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon">￥</span>
                    <input id="low" style="width: 130px;"  type="text" class="form-control" placeholder="最低价格">
                    <span class="input-group-addon">万元</span>
                </div>
            </div>
            -
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon">￥</span>
                    <input id="high" style="width: 130px;" type="text" class="form-control" placeholder="最高价格">
                    <span class="input-group-addon">万元</span>
                </div>
            </div>

            <button id="btnprice" style="background: #d8d8d8; color: #9297A3;">确认</button>
        </div>
    </div>
</div>

<div class="propertysinfo">

</div>
<div style="clear: both;">

</div>
<div style="position: relative;margin-top: 40px;text-align: center;color: white;">
    <div class="spinner" style="display: none;">
        <div class="rect1"></div>
        <div class="rect2"></div>
        <div class="rect3"></div>
        <div class="rect4"></div>
        <div class="rect5"></div>
    </div>
    <button id="loadmore" class="bg-color-black" ">
    加载更多
    </button>
</div>

<div style="height: 100px;">

</div>

</body>
</html>
<?php
include 'base/js.php';
?>
<script type="text/javascript">
    $(document).ready(function(){

        //关闭提示
        $("#close").click(function () {
            $('.dingzhi').fadeOut("slow");
        });

        //点击切换城市
        $(".selectcitychild ul li").click(function () {
//           console.log($(this).children().children().html());
            $('.selectcityparents').html($(this).children().children().html());
            $('.selectcityparents').attr('data-value',$(this).children().children().attr('data-value'));
            $(".selectcitychild").fadeOut("slow");

            //搜索城市
            loadpropertybycityORprice();
        });

        loadproperty();

        function loadproperty() {
            //发送房产请求
            var property_id=$('.propertysinfo .propertyinfo').last().attr('property_id')==undefined?'0':$('.propertysinfo .propertyinfo').last().attr('property_id');
            var city_id = $('.selectcityparents').attr('data-value');
            var low=$("#low").val();
            if(low==""){
                low=-1;
            }
            var high=$("#high").val();
            if(high==""){
                high=-1;
            }
            var type=1;
            $.ajax( {
                url: 'class/property/home_property.php',
                data:{
                    method:'more',
                    property_id : property_id,
                    city_id : city_id,
                    low : low,
                    high : high,
                    type : type
                },
                type:'get',
                success:function(data) {

                    $(".spinner").css('display','none');
                    $("#loadmore").css('display','inline-block');

                    var html="";
                    var jsonObj=eval("("+data+")");
//                    if(jsonObj.length==0){
//                        alert('无更多数据');
//                        return;
//                    }
                    if(jsonObj.length>0){

                        for(var i=0;i<jsonObj.length;i++){
//                        console.log(jsonObj[i]);
                            html+='<a href="property_detail.php?property_id='+jsonObj[i]['property_id']+'">' +
                                '<div class="propertyinfo" property_id="'+jsonObj[i]['property_id']+'">'+
                                '<div style="overflow: hidden;height: 90%;">' +
                                '<img src="'+jsonObj[i]['property_img']+'" >'+
                                '</div>'+
                                '<div style="float: left;">'+
                                '<span style="display: inline-block;font-size: 16px;color: #333743;">'+
                                jsonObj[i]['property_name']+
                                '</span>'+
                                '</div>'+

                                '<div style="float: right;">'+
                                '<span style="display: inline-block;font-size: 16px;color: #333743;">￥'+
                                jsonObj[i]['property_rmb']+
                                '</span>'+
                                '</div>'+
                                '<div style="clear:both;">'+

                                '</div>'+
                                '<div>'+
                                '<span style="display:block;font-size: 11px;color: #9297A3;">'+
                                jsonObj[i]['agent']+
                                '</span>'+
                                '</div>'+
                                '</div></a>';
                        }
                    }
                    else{
                        if(jsonObj.length==0 && $('.propertysinfo .propertyinfo').length==0){
                            html+='<div class="no_search" style="background:whitesmoke;height: 200px;display: block;position: relative;text-align: center;padding-top: 50px;">'+
                                '<img style="width: 50px;height: 50px;" src="public/image/group.png">'+
                                '<span>'+
                                '  搜索不到其他的,再试试其他的?'+
                                '</span>'+
                                '</div>';
                            $("#loadmore").css('display','none');
                        }
                    }
                    $(".propertysinfo").append(html);
//
                },
                beforeSend: function(){
                    $(".spinner").css('display','block');
                    $("#loadmore").css('display','none');
                },
                error : function() {
                    // view("异常！");
                    //window.wxc.xcConfirm('add fail', window.wxc.xcConfirm.typeEnum.error);
                }
            });
        }

        function loadpropertybycityORprice() {
            //发送房产请求
            var city_id = $('.selectcityparents').attr('data-value');
            var low=$("#low").val();
            if(low==""){
                low=-1;
            }
            var high=$("#high").val();
            if(high==""){
                high=-1;
            }
            var type=1;
            $.ajax( {
                url: 'class/property/home_property.php',
                data:{
                    method:'cityORprice',
                    city_id : city_id,
                    low : low,
                    high : high,
                    type : type
                },
                type:'get',
                success:function(data) {
                    $(".spinner").css('display','none');
                    $("#loadmore").css('display','inline-block');
                    var html="";
                    var jsonObj=eval("("+data+")");

                    if(jsonObj.length>0){

                        for(var i=0;i<jsonObj.length;i++){
                            html+='<a href="property_detail.php?property_id='+jsonObj[i]['property_id']+'">' +
                                '<div class="propertyinfo" property_id="'+jsonObj[i]['property_id']+'">'+
                                '<div style="overflow: hidden;height: 90%;">' +
                                '<img src="'+jsonObj[i]['property_img']+'" >'+
                                '</div>'+
                                '<div style="float: left;">'+
                                '<span style="display: inline-block;font-size: 16px;color: #333743;">'+
                                jsonObj[i]['property_name']+
                                '</span>'+
                                '</div>'+

                                '<div style="float: right;">'+
                                '<span style="display: inline-block;font-size: 16px;color: #333743;">￥'+
                                jsonObj[i]['property_rmb']+
                                '</span>'+
                                '</div>'+
                                '<div style="clear:both;">'+

                                '</div>'+
                                '<div>'+
                                '<span style="display:block;font-size: 11px;color: #9297A3;">'+
                                jsonObj[i]['agent']+
                                '</span>'+
                                '</div>'+
                                '</div></a>';
                        }
                    }

                    else{
                        if(jsonObj.length==0){
                            html+='<div class="no_search" style="background:whitesmoke;height: 200px;display: block;position: relative;text-align: center;padding-top: 50px;">'+
                                '<img style="width: 50px;height: 50px;" src="public/image/group.png">'+
                                '<span>'+
                                '搜索不到其他的,再试试其他的?'+
                                '</span>'+
                                '</div>';
                            $("#loadmore").css('display','none');
                        }
                    }
                    $(".propertysinfo").empty().append(html);
                },
                beforeSend: function(){
                    //加载动画
                    $(".spinner").css('display','block');
                    $("#loadmore").css('display','none');
                },
                error : function() {

                }
            });
        }

        $("#btnprice").click(function () {
            loadpropertybycityORprice();
        })

        //点击加载更多
        $("#loadmore").click(function () {
            loadproperty();
        })
        $("#tomessage").click(function () {
            window.location.href="message.php";
        });

    });
    function showcity() {
        $(".selectcitychild").fadeIn("slow");
    }
    function hidecity() {
        $(".selectcitychild").fadeOut("slow");
    }

    function showprice() {
        $(".pricechild").fadeIn("slow");
    }
    function hideprice() {
        $(".pricechild").fadeOut("slow");
    }
    $(function(){
        $(window).scroll(function(){

            if($(window).scrollTop()>100){
                $('.dingzhi').css({
                    'top':'0px'
                });
            }else{
                $('.dingzhi').css({
                    'top':'64px'
                });
            }
        });
    });

</script>